<template>
	<div class="admin_update">
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/config/admin">后台用户管理</BreadcrumbItem>
			    <BreadcrumbItem href="/config/admin/update">用户更新</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
		    		<IInput v-model="form.id" class="hide" />
		    		<FormItem prop="name" label="登录名">
			            <IInput v-model="form.name" size="large" placeholder="登录名,纯英文" v-bind:disabled="form.nameDisabled" />
			        </FormItem>
			        <FormItem prop="password" label="密码">
			            <IInput v-model="form.password" size="large" placeholder="请输入密码" type="password" />
			        </FormItem>
					<FormItem prop="isMaster" label="是否超级管理员">
			            <ISwitch v-model="form.isMaster">
			            	<span slot="open">是</span>
        					<span slot="close">否</span>
			            </ISwitch>
			            <Alert type="warning" closable show-icon style="display:inline">超级管理员一旦添加,无法被更新,无法查看,请谨慎操作!</Alert>
			        </FormItem>

			        <FormItem prop="roles" label="角色">
			           	<CheckboxGroup v-model="form.roles"  @on-change="checkAllGroupChange">
			        		<Checkbox v-for="(checkbox,index) in checkBoxs" :key="checkbox.id" :label="checkbox.id" >{{checkbox.txt}}</Checkbox></br>
					    </CheckboxGroup>
			        </FormItem>
			        <FormItem>
			        	<Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">角色全选</Checkbox>
			        </FormItem>
			        <FormItem>
			        	<IButton type="primary" @click="submit('form')">提交</IButton>
			        </FormItem>
		    	</IForm>
		    </div>
		</div>
	</div>
</template>
<script>
import {Breadcrumb,Form,Input,Button,Checkbox,Switch,Alert} from 'iview';

export default{
	data () {
		const validateName=(rule , value ,callback)=>{
            var reg = /^[A-Za-z]+$/;
            if(!reg.test(value)){
                callback(new Error('请填写合法登录名'));
            }
            var _this = this;
            this.Axios.Config.Admin.CheckName({name:value,id:this.form.id})
            .then(res =>{
            	if(!res){
            		callback(new Error('登录名已存在'));
            		return false;
            	}
            	callback();
            })
        };

        const validatePwd = (rule , value ,callback)=>{
            if(this.form.id>0){
            	callback();
            }
            if(value==''){
            	callback(new Error('请填写密码'));
            }
            if(value.length<6){
            	callback(new Error('密码最少6位'));	
            }
            callback();
        };

        return {
            form :{
				id : 0,
				name : '',
				nameDisabled : false,
				password  : '',
				isMaster : false ,
				roles : [],
            },
            checkBoxs : [],
            indeterminate: false,
			checkAll: false,
			formRule: {
                name: [
                    { required: true, message: '请填写登录名', trigger: 'blur' },
                    { validator: validateName, trigger: 'blur'}
                ],
                password: [
                    { validator: validatePwd, trigger: 'blur'}
                ],
                roles: [
                	{ required: true, message: '请至少选择一个角色'}
                ]
            }
        }
    },
	components:{
        Breadcrumb,
        "BreadcrumbItem" : Breadcrumb.Item,
        'IInput' : Input,
		'IForm' : Form,
		'FormItem' : Form.Item,
		'IButton' : Button,
		Checkbox,
		"CheckboxGroup" : Checkbox.Group,
		"ISwitch" : Switch,
		Alert,
    },
    methods: {
    	submit(name){
    		this.$refs[name].validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.Axios.Config.Admin.Update(this.form)
	            .then(res =>{
	                if(!res) return false;
	                this.$router.go(-1);
	            })
            })
    	},
    	handleCheckAll () {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
            	var all = [];
            	var boxs = this.checkBoxs;
            	for(var i in boxs){
            		all.push(boxs[i]['id']);
            	}
                this.form.roles = all;
            } else {
                this.form.roles = [];
            }
        },
    	checkAllGroupChange (data) {
    		if(data==undefined) return false;
            if (data.length === this.checkBoxs.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        }
    },
    created: function() {
    	//获取所有角色
    	this.Axios.Config.Admin.AllRole()
        .then(res =>{
            if(!res) return false;
            var data = res.data;
           	for(var i in data){
            	this.checkBoxs.push({
	        		'id': data[i]['id'],
	        		'txt' : data[i]['displayName'],
	        	})
            }
            this.checkAllGroupChange(this.form.permissions);
        })
    	
        //面包屑导航路径赋值
        if(this.$route.params.id===undefined){
        	return false;
	    }
	    var id = this.$route.params.id;
    	this.Axios.Config.Admin.Get(id)
        .then(res =>{
        	if(!res) return false;
            var data = res.data;
            this.form.id = data.id;
            this.form.name = data.name;
            this.form.nameDisabled = true;
            this.form.isMaster = data.isMaster ? true : false;
            for(var i in data.roles){
            	this.form.roles.push(data.roles[i]['id']);
            }
            this.checkAllGroupChange(this.form.roles);
            
        })
	}
}
</script>
<style>
    .admin_update .ivu-checkbox-group-item{width: 100%;}
</style>